<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.css">
    <script type="text/javascript" src="javascripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="javascripts/bootstrap.js"></script>
    <style>

        .fontSize15 {
            font-size: 15pt;
        }

        .fontSize10 {
            font-size: 10pt;
        }

        .fontSize30 {
            font-size: 30pt;
        }

        .colorWhite {
            color: white;
        }

        .homeText:hover {
            cursor: pointer
        }

        .regDiv {
            width: 480px;
            background-color: rgba(255, 255, 255, 0.4);
        }

        .adminDiv {
            background-color: rgba(255, 255, 255, 0.6);
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 5px 6px 7px 8px;
        }

        #error {
            color: red
        }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
        function createCode(len) {
            var seed = new Array(
                    'abcdefghijklmnopqrstuvwxyz',
                    'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                    '0123456789'
            );               //创建需要的数据数组
            var idx, i;
            var result = '';   //返回的结果变量
            for (i = 0; i < len; i++) //根据指定的长度
            {
                idx = Math.floor(Math.random() * 3); //获得随机数据的整数部分-获取一个随机整数
                result += seed[idx].substr(Math.floor(Math.random() * (seed[idx].length)), 1);//根据随机数获取数据中一个值
            }
            return result; //返回随机结果
        }
        var checkRandom = function () {
            var inputRandom = document.getElementById("inputRandom").value;
            var autoRandom = document.getElementById("autoRandom").innerHTML;
//            alert( inputRandom + ":" + autoRandom );
            if (inputRandom == autoRandom) {
                return true;
            } else {
                alert("验证码错误");
                return false;
            }
        }

        var checkRePassword = function () {
            if ($("#rePassword").val() != $("#password").val()) {
                $("#msgRePassword").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            } else {
                $("#msgRePassword").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
                return true;
            }
        }
        var checkUsername = function () {
            if ($("#username").val() == "") {
                return false;
            }
            var tel = $("#username").val(); //获取手机号
            var telReg = !!tel.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
            //如果手机号码不能通过验证
            if (telReg == false) {
                $("#msg").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            } else {
                $("#msg").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
            }

            $.ajax({
                type: "post",
                url: "/checkUsername",
                data: "username=" + $("#username").val(),
                success: function (msg) {
                    if ("success" == msg) {
                        $("#msg").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
                        return true;
                    }
                    else {
                        $("#msg").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                        alert("用戶名已存在，請重新輸入");
                        $("#username").val("");
                        return false;
                    }

                }
            });
        }
        var checkPassword = function () {
            if ($("#password").val().length < 6) {
                $("#msgpassword").html("<img src='/images/icons/failure.png' style='height: 25px;width: 25px;'>");
                return false;
            } else {
                $("#msgpassword").html("<img src='/images/icons/success.png' style='height: 25px;width: 25px;'>");
                return true;
            }
        }
        var checkAll = function () {
            if (checkUsername() == false) {
                return false;
            }
            if (checkPassword() == false) {
                return false;
            }
            if (checkRePassword() == false) {
                return false;
            }
            if (checkRandom() == false) {
                return false;
            }


        }
        function submitForm() {
            if (checkAll() == false) {
                return false;
            }
            ;
            $.post("/register", $("#regForm").serialize(),
                    function (data) {
                        if (data == "success") {
                            alert("恭喜您,注册成功");
                            location.href="/toLogin";
                        }else{
                            alert("抱歉,注册失败");
                        }
                    });

        }


    </SCRIPT>
</head>
<body background="images/bg-blueSky.jpg">
<nav class="navbar navbar-inverse">
    <div id="navbar" class="navbar-collapse collapse">
        <span class="fontSize30 colorWhite homeText"
              onclick="location.href='#'"><img src="/images/02.png" style="height: 90px" alt="邀约">&nbsp;&nbsp;&nbsp;邀约管理系统</span>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12" style="height: 60px;text-align: center;padding-top: 40px;">
                </div>
            </div>
            <div class="row" id="container">

                <div class="col-md-4">
                </div>
                <div class="col-md-4 regDiv">
                    <div class="row adminDiv text-center">
                        <span class="fontSize15">
                            欢迎注册，如果您已经注册。请在此<a href="toLogin">登录</a>
                        </span>
                    </div>
                    <div class="row" style="margin-top: 20px;">

                        <form class="form-horizontal" role="form" action="/register" id="regForm"
                              onsubmit="return checkAll()">


                            <div class="form-group">
                                <label for="username" class="col-sm-4 control-label">
                                    <span class="fontSize15">手&nbsp;&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;:</span>
                                </label>

                                <div class="col-sm-6">
                                    <input type="text" class="form-control" required id="username" name="username"
                                           onblur="checkUsername()" placeholder="手机号将作为您今后的登录帐号"/>
                                </div>
                                <div class="col-sm-1" id="msg"></div>

                            </div>
                            <!--<div class="form-group">
                                <div class="col-sm-1"></div>
                                <div class="col-sm-8 text-center">
                                    <span class="control-label fontSize10">&nbsp;手机号可作为您今后的登录帐号</span>
                                </div>
                            </div>-->
                            <div class="form-group">
                                <label for="password" class="col-sm-4 control-label">
                                    <span class="fontSize15">密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;:</span>
                                </label>

                                <div class="col-sm-6">
                                    <input type="password" class="form-control" id="password" name="password"
                                           required
                                           onblur="checkPassword()"
                                           oninvalid="setCustomValidity('请填写密码');"
                                           oninput="setCustomValidity('');"/>
                                </div>
                                <div class="col-sm-1" id="msgpassword"></div>
                            </div>
                            <div class="form-group">
                                <label for="rePassword" class="col-sm-4 control-label">
                                    <span class="fontSize15">确认密码:</span>
                                </label>

                                <div class="col-sm-6"><input type="password" class="form-control" id="rePassword"
                                                             name="rePassword"
                                                             required oninvalid="setCustomValidity('请验证密码');"
                                                             oninput="setCustomValidity('');"
                                                             onblur="checkRePassword()"/>
                                </div>
                                <div class="col-sm-1" id="msgRePassword"></div>
                            </div>


                            <div class="form-group">
                                <label for="inputRandom" class="col-sm-4 control-label">
                                    <span class="fontSize15">验证码&nbsp;&nbsp;&nbsp;:</span>
                                </label>

                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="inputRandom" required
                                           oninvalid="setCustomValidity('请填写验证码');"
                                           oninput="setCustomValidity('');">


                                </div>
                                <div class="col-sm-1"><label id="autoRandom" value="" style="padding-top: 5px;"></label></div>
                                <div class="col-sm-3"><INPUT TYPE="button" class="btn btn-default" VALUE="获取验证码"
                                                             onclick="autoRandom.innerHTML=createCode(4)"></div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-offset-2 col-sm-4">
                                    <button data-dismiss="alert" type="button" onclick="submitForm()" class="btn btn-default" id="regButton">
                                        立即注册
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-2">

                </div>
            </div>
        </div>
    </div>
</div>
</body>


</html>